.material-tabs {
  @include user-select(none);
  @include display-flex;
  @include align-self(stretch);
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  line-height: 1;
  font-size: 0.9rem;

  & input {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }
}

.material-tab {
  @include display-flex;
  @include align-items(center);
  fill: #fff;
  padding: 0 24px;
  cursor: pointer;
  position: relative;

  & .selected {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 2px solid transparent;
  }

  & :checked + .selected,
  & :focus + .selected {
    border-color: #00BCD4;
  }

  & :focus + .selected {
    background: transparentize(#fff, 0.9);
  }
}